{% load menu %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/bootstrap/css/layui.css">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/bootstrap/css/account.css">
    {% block css %}{% endblock %}
</head>
<body>

<div class="navbar navbar-default" style="border-radius: 0">

    <div class="nav flex-column">
        <ul class="nav navbar-nav navbar-left">
            <div class="navbar-brand">
                <span class="mettler">METTLER</span>
                <span class="toledo">TOLEDO</span>
                <span class="service">Service</span>
            </div>
        </ul>
        <div class="collapse navbar-collapse">

            <ul class="nav navbar-nav h5" id="navbar">
                {% menu_list request %}
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false"><span class="glyphicon glyphicon-user"
                                                   aria-hidden="true"></span> {{ request.unicom_username }} <span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/account/info/">账户信息</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/logout/">注销</a></li>
                    </ul>
                </li>
            </ul>


        </div>
    </div>
</div>


<div class="container">
    {% block content %}{% endblock %}
</div>


<script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/js/rsd.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
<script src="{% static 'bootstrap/js/layui.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap-table.min.js' %}"></script>
<script src="{% static 'bootstrap/js/FileSaver.min.js' %}"></script>
<script src="{% static 'bootstrap/js/tableExport.min.js' %}"></script>
<script src="{% static 'bootstrap/js/tableExport.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap-table-export.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap-table-toolbar.min.js' %}"></script>
<script src="{% static 'bootstrap/js/echarts.min.js' %}"></script>
<script src="{% static 'bootstrap/js/vue.js' %}"></script>

<script>
// 确保Bootstrap下拉菜单正常工作
$(document).ready(function(){
    $('.dropdown-toggle').dropdown();
});

// 添加平滑过渡效果，减少导航栏跳动感
$(document).ready(function() {
    // 为所有导航链接添加平滑过渡效果
    $('.nav a').on('click', function(e) {
        const href = $(this).attr('href');
        if (href && href !== '#' && !href.startsWith('javascript:')) {
            // 添加加载指示器
            $('body').addClass('page-transition');
            setTimeout(function() {
                window.location.href = href;
            }, 100);
        }
    });
    
    // 手动初始化dropdown，确保下拉菜单正常工作
    $('.dropdown').on('show.bs.dropdown', function () {
        $(this).find('.dropdown-menu').addClass('show');
    });
    
    $('.dropdown').on('hide.bs.dropdown', function () {
        $(this).find('.dropdown-menu').removeClass('show');
    });
});
</script>

{% block js %}
{% endblock %}

</body>
</html>


<style>
    .navbar {
        background: linear-gradient(135deg, #337ab7 0%, #286090 100%) !important;
        border: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        position: relative;
        overflow: visible; /* 修改为visible确保下拉菜单不会被裁剪 */
        z-index: 1000;
        /* 添加过渡效果 */
        transition: all 0.3s ease;
    }
    

    
    .navbar-nav > li > a {
        color: #ffffff !important;
        font-weight: 500;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        padding: 15px 20px;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
    }
    
    .navbar-nav > li > a:hover,
    .navbar-nav > li.active > a {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff !important;
        transform: translateY(-2px);
    }
    
    .navbar-nav > li > a:focus {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .navbar-brand {
        color: #ffffff !important;
        font-weight: bold;
        position: relative;
        z-index: 1;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }
    
    .dropdown-menu {
        background-color: #ffffff;
        border: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 6px 12px rgba(0,0,0,0.175);
        z-index: 1060; /* 提高z-index值，确保高于navbar的z-index */
        position: absolute; /* 确保使用绝对定位 */
        /* 添加过渡效果 */
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        display: block; /* 确保元素设置为block */
    }
    
    .dropdown-menu.show {
        opacity: 1;
        transform: translateY(0);
    }
    
    .dropdown-menu > li > a {
        color: #333333;
        transition: all 0.2s ease;
    }
    
    .dropdown-menu > li > a:hover {
        background-color: #f5f5f5;
        color: #262626;
    }
    
    .dropdown-toggle {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px;
        padding: 5px 15px !important;
        margin: 10px 10px 10px 0 !important;
        transition: all 0.3s ease;
        z-index: 1040; /* 添加z-index确保下拉按钮层级正确 */
        position: relative; /* 确保相对定位 */
    }
    
    .dropdown-toggle:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }
    
    .caret {
        color: #ffffff;
        transition: transform 0.3s ease;
    }
    
    .dropdown-toggle[aria-expanded="true"] .caret {
        transform: rotate(180deg);
    }
    
    /* 添加METTLER TOLEDO Service文字颜色样式 */
    .mettler, .toledo {
        color: #FFFFFF; /* 白色 */
        font-weight: bold;
        font-size: 20px;
    }
    
    .service {
        color: #90EE90; /* 浅绿色 */
        font-weight: bold;
        font-size: 20px;
    }
    
    /* 优化菜单选中状态的样式 */
    .navbar-nav > li.active > a,
    .navbar-nav > li.active > a:hover,
    .navbar-nav > li.active > a:focus {
        background: rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
        font-weight: bold;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
    }
    
    /* 确保dropdown在navbar中正确显示 */
    .navbar-nav > li.dropdown {
        position: relative;
        z-index: 1050; /* 确保下拉菜单容器有足够高的z-index */
    }
    
    /* 确保navbar-collapse正常显示 */
    .navbar-collapse {
        z-index: 1000;
        position: relative;
    }
    
    /* 添加页面水印背景 */

    /* 确保容器背景不会遮挡水印 */
    .container {
        position: relative;
        z-index: 1;
    }
    
    /* 添加页面过渡效果 */
    .page-transition * {
        transition: opacity 0.1s ease-out;
    }
    
    .page-transition {
        opacity: 0.8;
    }
    
    /* 为导航项添加悬停效果 */
    .nav > li > a {
        transition: background-color 0.2s ease, color 0.2s ease;
    }
</style>